<template>
  <div class="wft-advanced-form-contextmenu-panel" :style="panelPositionStyle">
    <div @click="clearFormPanel">清空画板</div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import Bus from '@/utils/bus'

const props = withDefaults(defineProps<{
  top?: number | string,
  bottom?: number | string,
  left?: number | string,
  right?: number | string,
  curComp: TComp,
  id?: string
}>(), {
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  id: ''
})

const panelPositionStyle = computed(() => ({
  top: typeof props.top == 'number' ? props.top + 'px' : props.top,
  bottom: typeof props.bottom == 'number' ? props.bottom + 'px' : props.bottom,
  left: typeof props.left == 'number' ? props.left + 'px' : props.left,
  right: typeof props.right == 'number' ? props.right + 'px' : props.right,
}))

// 清空画板
function clearFormPanel() {
  props.curComp.children = []
  Bus.emit('addStack')
}
</script>
<style scoped>
.wft-advanced-form-contextmenu-panel {
  width: 150px;
  border: 1px solid #eee;
  border-radius: 3px;
  -webkit-box-shadow:0 0 10px #eee;
  -moz-box-shadow:0 0 10px #eee;
  box-shadow:0 0 10px #eee;
  z-index: 99;
  position: absolute;
  background-color: #fff;
  padding: 5px 0;
}

.wft-advanced-form-contextmenu-panel > div {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 13px;
  padding: 0 12px;
  box-sizing: border-box;
  cursor: pointer;
}
.wft-advanced-form-contextmenu-panel > div:hover {
  background-color: #4393e6;
  color: #fff;
}
</style>
